<script setup>
import { ref, defineProps, watch } from 'vue';
import {
  Close
} from '@element-plus/icons-vue'
import { ElCard,ElButton,ElForm,ElFormItem,ElInput,ElSelect,ElOption,ElSegmented } from 'element-plus'

const props = defineProps({
  apiList: {
    type: Object,
    default: () => ([])
  }
})
const dataList = ref([])
const tabOptions = ref([
  { label: '动态数据', value: '1' },
  { label: '静态数据', value: '2' },
])
const tabApi = ref([
  { label: '仿真接口', value: '1' },
  { label: '真实接口', value: '2' },
])
const optionsMethod = ref([
  { label: 'GET', value: 'GET' },
  { label: 'POST', value: 'POST' },
  // { label: 'PUT', value: 'PUT' },
  // { label: 'DELETE', value: 'DELETE' },
])

let defaultData = {
  "url": generate18DigitUniqueId(),
  "method": "GET",
  "type": "2",
  "apiType": "1",
  "inData": `(data) => { 
  

  return {data:data,parms:data }}`,
  "outData": `(data) => { 
  
  
  return data}`,
  "staticData": `{
    "data": "123"
    }`
}

if (props.apiList.length > 0) {
  dataList.value = props.apiList
} else {
  dataList.value.push(defaultData)
}

function generate18DigitUniqueId() {
  const timestamp = Date.now().toString();
  const randomNum = Math.floor(Math.random() * 100000).toString().padStart(5, '0');
  return timestamp + randomNum;
}

function addData() {
  const newData = {
    "url": generate18DigitUniqueId(),
    "method": "GET",
    "type": "1",
    "apiType": "1",
    "inData": `(data) => { 
  
  
  return data}`,
    "outData": `(data) => { 
  
  
  return data}`,
    "staticData": `{
    
    }`
  }
  dataList.value.push(newData)
}
function removeData(index) {
  dataList.value.splice(index, 1)
}

defineExpose({
  apiData: dataList.value
})
</script>

<template>
  <div class="_container_md">
    <el-card v-for="(data, i) in dataList" :key="i"
      style="max-width: 600px;position: relative;padding-top: 20px; margin: 10px 0;">
      <el-button v-if="dataList.length > 1" type="text" class="_close_btn_" :icon="Close" @click="removeData(i)" />
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item label="接口地址" label-position="left">
          <el-input v-model="data.url" />
        </el-form-item>
        <el-form-item label="数据方式" label-position="left">
          <el-segmented v-model="data.type" :options="tabOptions" block />
        </el-form-item>
        <el-form-item label="仿真接口" v-if="data.type === '1'" label-position="left">
          <el-segmented v-model="data.apiType" :options="tabApi" block />
        </el-form-item>
        <el-form-item label="请求方式" v-if="data.type === '1'" label-position="left">
          <el-select v-model="data.method" placeholder="Select" style="width: 240px">
            <el-option v-for="item in optionsMethod" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="请求入参" v-if="data.type === '1'" label-position="left">
          <el-input v-model="data.inData" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" />
        </el-form-item>
        <el-form-item label="请求出参" v-if="data.type === '1'" label-position="left">
          <el-input v-model="data.outData" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" />
        </el-form-item>
        <el-form-item label="静态数据" v-if="data.type === '2'" label-position="left">
          <el-input v-model="data.staticData" :autosize="{ minRows: 4, maxRows: 10 }" type="textarea" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-button plain style="width: 100%;" @click="addData">新增</el-button>
  </div>
</template>

<style scoped lang="scss">
._close_btn_ {
  position: absolute;
  right: 10px;
  top: 6px;
}
</style>